import React, { Component } from 'react';
import {
    View,
    Image,
    StyleSheet,
    TextInput,
    Platform
} from 'react-native';
import PropTypes from "prop-types";
import MyTextInput from "./MyTextInput";
import ClientUtil from '../utils/ClientUtil'

class SearchBox extends Component {
    constructor(props) {
        super(props);
        this.state = {
            txtValue: ''
        }
    }

    getValue(event) {
        var vaule = event.nativeEvent.text;
        this.setState({
            txtValue: vaule
        })
        this.props.handler(vaule);
    }


    render() {
        return (
            <View style={{ width: ClientUtil.SCREEN_WIDTH, height: 55, backgroundColor: 'white', justifyContent: 'center', }}>
                <View style={styles.searchBox}>
                    <Image
                        source={require('../images/utils/search.png')}
                        style={styles.searchIcon}>
                    </Image>
                    <MyTextInput
                        style={styles.inputText}
                        clearButtonMode='while-editing'
                        autoCapitalize='none'  //设置首字母不自动大写
                        underlineColorAndroid={"transparent"}  //下划线颜色设置为透明
                        placeholderTextColor={'#aaa'}  //设置占位符颜色
                        placeholder={"请输入关键字"}
                        onEndEditing={this.getValue.bind(this)}
                        value={this.state.txtValue}
                    />
                </View>
            </View>
        )
    }
}

SearchBox.propTypes = {
    handler: PropTypes.func
};


const styles = StyleSheet.create({
    searchBox: {
        height: 35,
        marginLeft: 16,
        marginRight: 16,
        marginBottom: 10,
        marginTop: 10,
        flexDirection: 'row',
        backgroundColor: '#ECEDEE',
        borderRadius: 16,
        paddingLeft: 16,
        paddingRight: 4,
    },
    searchIcon: {
        alignSelf: 'center',
        marginRight: 7,
        width: 18,
        height: 18,
    },
    inputText: {
        alignSelf: 'center',
        height: 40,
        fontSize: 14,
        flex: 1,
        textAlignVertical: 'center',
        textDecorationLine: 'none'
    }
});

export default SearchBox;